//编辑，详情动态表格
<template>
  <el-dialog
    v-el-drag-dialog
    width="1000px"
    :visible="visible"
    title="通道"
    class="segment-list-box"
    @open="open"
    @close="close"
  >
    <el-radio-group v-model="viewType">
      <el-radio-button label="list">列表展示</el-radio-button>
      <el-radio-button label="view">图形展示</el-radio-button>
    </el-radio-group>
    <div v-show="viewType === 'list'">
      <!-- 业务基本信息显示 -->
      <biz-info :row-data="rowData" />
      <!-- 通道信息 -->
      <el-table
        v-if="tableHead.length"
        ref="segmentTable"
        border
        :data="tableData"
        style="width: 100%"
        :max-height="360"
        size="mini"
      >
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          width="50"
          align="center"
        />
        <el-table-column
          fixed="left"
          label="业务状态"
          align="center"
          width="100"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <el-select
                v-model="scope.row.bizStatus"
              >
                <el-option
                  v-for="(item, index) in biz_status"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
          </template>
        </el-table-column>
        <el-table-column
          fixed="left"
          label="锁定"
          align="center"
          width="80"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <i
              class="lock-icon"
              :class="
                scope.row.lockStatus === 'LOCKED'
                  ? 'el-icon-lock'
                  : 'el-icon-unlock'
              "
              @click="changeLocked(scope.row)"
            />
          </template>
        </el-table-column>
        <div v-for="(item, index) in tableHead" :key="index">
          <!-- 存在光纤-->
          <el-table-column
            v-if="item.isFiber"
            :label="item.label"
            align="center"
            :prop="item.props"
            show-overflow-tooltip
          ></el-table-column>
          <!-- 非光纤 -->
          <el-table-column
            v-if="!item.isFiber"
            :label="item.label"
            :prop="item.props"
            align="center"
            show-overflow-tooltip
          >
            <el-table-column
              v-for="(subitem, indexs) in item.subLabel"
              :label="subitem.label"
              :prop="subitem.props"
              align="center"
              :key="indexs"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table-column>
        </div>
      </el-table>
    </div>
    <biz-graphical
      v-if="viewType === 'view'"
      :biz-channel-list="bizChannelData"
    />
    <template v-slot:footer>
      <el-button
        v-if="showType === 'restore' &&
          !bizChannelData.some(
            i => i.lockStatus === 'LOCKED')
        "
        class="fl"
        @click="$debounce(restore, bizChannelData)"
      >智能恢复</el-button>
      <el-button type="primary" @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script>
  import { biz_status } from '@/enums/DevEnum.js'
  import bizChannelData from '../data/bizChannel.js'
  import BizGraphical from './BizGraphical'
  import BizInfo from './BizInfo'

  export default {
    name: 'SegmentDetail',
    components: { BizInfo, BizGraphical },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      showType: {
        type: String,
        default: ''
      },
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        biz_status,
        bizChannelData,
        viewType: 'list',
        tableHead: [],
        tableData: []
      }
    },
    methods: {
      open() {
        console.log(this.rowData)
        this.viewType = 'list'
        console.log(bizChannelData)
        this.createTableHead()
        this.createTableData()
      },

      createTableHead() {
        this.tableHead = []
        // segmentList网段里，第一个和最后一个都是业务设备
        bizChannelData[0].segmentList.forEach((i, index) => {
          // 第一项（业务设备）
          const obj = {}
          if (index === 0) {
            obj.label = i.startNode.nodeName + '（业务设备）'
            obj.props = i.startNode.nodeId
            obj.subLabel = []
          } else {
            obj.label = i.startNode.nodeName
            obj.props = ''
            obj.subLabel = [
              {
                label: 'A向端口',
                props: i.startNode.nodeId + 'a'
              },
              {
                label: 'Z向端口',
                props: i.startNode.nodeId + 'z'
              }
            ]
          }
          this.tableHead.push(obj)
          // 存在纤芯
          if (i.fiberId) {
            const  obj = {}
            obj.label = '纤芯' + i.fiber.fiberName
            obj.props = i.segmentId + 'fiberName'
            obj.isFiber = true
            obj.subLabel = []
            this.tableHead.push(obj)
          }
          // 最后一项取endNode（业务设备）
          if (index === bizChannelData[0].segmentList.length - 1) {
            const obj = {}
            obj.label = i.endNode.nodeName + '（业务设备）'
            obj.props = i.endNode.nodeId
            obj.subLabel = []
            this.tableHead.push(obj)
          }
        })
        console.log(this.tableHead) // 生成的表头
      },

      createTableData() {
        this.tableData = []
        bizChannelData.forEach(i => {
          const obj = {}
          i.segmentList.forEach((j, index) => {
            if (index === 0) {
              obj[j.startNode.nodeId] = j.startPort.bizName
              obj[j.endNode.nodeId + 'a'] = j.endPort.bizName
            } else {
              obj[j.startNode.nodeId + 'z'] = j.startPort.bizName
              obj[j.endNode.nodeId + 'a'] = j.endPort.bizName
            }
            if (j.fiberId) {
              obj[j.segmentId + 'fiberName'] = j.fiber.fiberName
            }
            if (index === i.segmentList.length - 1) {
              obj[j.startNode.nodeId + 'z'] = j.startPort.bizName
              obj[j.endNode.nodeId] = j.endPort.bizName.replace(/{IN}/g, '输入')
            }
            obj.bizStatus = i.bizStatus
            obj.lockStatus = i.lockStatus
          })
          this.tableData.push(obj)
        })
        console.log(this.tableData) // 生成的表格数据
      },
      // 修改锁定状态
      changeLocked(data) {
        const changeStatus = (data.lockStatus =
          data.lockStatus === 'UNLOCKED' ? 'LOCKED' : 'UNLOCKED')
        console.log({
            channelId: data.channelId,
            lockStatus: changeStatus
          })
        this.$message.success('修改成功！')
      },
      // 执行恢复前校验，如果业务正在还原，就不能执行恢复操作
      restore(segmentList) {
      },
      close(data) {
        this.$emit('close', data)
      }
    }
  }
</script>
<style lang="scss" scoped>
.lock-icon {
  font-size: 16px;
  cursor: pointer;

  &.el-icon-lock {
    color: #409eff;
  }
}
</style>
